import React, {useEffect} from 'react';
import {Menu, Dropdown, notification} from 'antd';
import {useNavigate, useLocation} from "react-router-dom";
import {store} from '../store';

const Header = (props) => {
    const navigate = useNavigate();
    const location = useLocation();
    const navList = [
        {id: 1, icon: require('../assets/icon/header/nav/nav-1.png').default, text: '城市片区', name: 'city', url: '/city'},
        {id: 2, icon: require('../assets/icon/header/nav/nav-2.png').default, text: '楼盘字典', name: 'building', url: '/building'},
        {id: 3, icon: require('../assets/icon/header/nav/nav-3.png').default, text: '房源管理', name: 'house', url: '/house'},
        {id: 4, icon: require('../assets/icon/header/nav/nav-4.png').default, text: '钥匙管理', name: 'key', url: '/key'},
        {id: 5, icon: require('../assets/icon/header/nav/nav-5.png').default, text: '客源管理', name: 'client', url: '/client'},
        {id: 6, icon: require('../assets/icon/header/nav/nav-6.png').default, text: '管理员权限', name: 'auth', url: '/auth'},
        {id: 7, icon: require('../assets/icon/header/nav/nav-7.png').default, text: '部门管理', name: 'store', url: '/store'},
        // {id: 8, icon: require('../assets/icon/header/nav/nav-8.png').default, text: '系统设置', name: 'system_set', url: '/system_set'}
        {id: 8, icon: require('../assets/icon/header/nav/nav-8.png').default, text: '系统设置', name: 'system_set', url: '/system_set'}
    ]
    const rule = {
        'city': ['/city'],
        'building': ['/building', '/building-edit'],
        'house': ['/house', '/house-edit'],
        'key': ['/key'],
        'client': ['/client'],
        'auth': ['/auth'],
        'store': ['/store'],
        'system_set': ['/system_set']
    }
    const {userInfo, auth} = store.getState();
    const {navCur} = props

    const menu = (
        <Menu>
            <Menu.Item key="0" onClick={logOut}>退出登录</Menu.Item>
        </Menu>
    )

    useEffect(() => {
        let res = auth.some(e => {
            return rule[e.name].includes(location.pathname)
        })
        if(!res){
            notification.error({
                message: '无访问权限'
            })
            if(auth.length > 0){
                navigate(rule[auth[0].name][0], {replace: true})
            } else {
                logOut()
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return (
        <div className="Header main-bg u-p-l-20 u-p-r-20 u-flex u-row-between">
            <div className="u-flex">
                <img className="logo" src={require('../assets/logo.png').default} alt=""/>
                <div className="nav-list u-flex">
                    {
                        // eslint-disable-next-line
                        navList.map((nav, ind) => {
                            if(auth.some(e => e.name === nav.name)){
                                return (
                                    <div className={`u-btn u-flex u-col-bottom u-p-20 ${navCur === ind ? 'active': ''}`} key={nav.id} onClick={() => navTo(nav.url)}>
                                        <img className="nav-icon" src={nav.icon} alt="" />
                                        <span className="nav-text">{nav.text}</span>
                                    </div>
                                )
                            }
                        })
                    }
                    {/*<div className="u-flex u-col-bottom u-p-20">*/}
                    {/*    <img className="nav-icon" src={require('../assets/icon/header/nav/nav-7.png').default} alt="" />*/}
                    {/*    <span className="nav-text">小程序</span>*/}
                    {/*</div>*/}
                </div>
            </div>
            <div className="u-flex">
                {/*<div>*/}
                {/*    <img src={require('../assets/icon/header/help.png').default} alt=""/>*/}
                {/*</div>*/}
                {/*<div className="msg-item">*/}
                {/*    <div className="dot" />*/}
                {/*    <img src={require('../assets/icon/header/msg.png').default} alt=""/>*/}
                {/*</div>*/}
                <Dropdown overlay={menu} trigger={['click']}>
                    <div className="u-flex u-btn">
                        <img className="avatar" src={userInfo.avatar} alt="" />
                        <img src={require('../assets/icon/header/down.png').default} alt=""/>
                    </div>
                </Dropdown>
            </div>
        </div>
    )
    function navTo(url){
        navigate(url, {replace: true})
    }
    function logOut(){
        store.dispatch({type: 'userInfo', value: {}})
        store.dispatch({type: 'auth', value: []})
        navigate('/login', {replace: true})
    }
}

export default Header;